<template>
  <el-dialog v-if="dialogFormVisible" v-el-drag-dialog :visible.sync="dialogFormVisible" :close-on-click-modal="false" :destroy-on-close="true" width="800px" :title="winTitle" @close="handleDialogClose">
    <div v-if="loading" v-loading="loading" class="el-dialog__body" />
    <el-form v-else class="form-container">
      <div class="el-table el-table--fit el-table--border">
        <div class="el-table__body-wrapper">
          <table class="el-table__body" cellspacing="0" cellpadding="0" border="0">
            <tbody>
              <tr>
                <td class="tdlbl tdw17 ">文件标题</td>
                <td class="tdcont tdw83" colspan="3">
                  {{ wfInstance.title }}
                </td>
              </tr>
              <tr>
                <td class="tdlbl tdw17 ">上一处理环节</td>
                <td class="tdcont tdw83" colspan="3">  {{ wflog.nodeName }} </td>
              </tr>
              <tr>
                <td class="tdlbl tdw17 ">上一环节处理人</td>
                <td class="tdcont tdw83" colspan="3">  {{ wflog.staffName }}  </td>
              </tr>
              <tr>
                <td class="tdlbl tdw17 "><span class="required">*</span>新增处理环节</td>
                <td class="tdcont tdw83" colspan="3">
                  <ValidationProvider ref="ValidationProvider" v-slot="{ errors }" name="新增处理环节" rules="required">
                    <el-tooltip :disabled="errors===undefined||errors[0]===undefined" :content="errors===undefined?'':errors[0]" :class="{'invalid-field':errors!==undefined&&errors[0]!==undefined}" popper-class="error-popper-class" placement="right-start" effect="dark">
                      <el-select v-model="wflog.newNode" placeholder="请选择新增处理环节" @change="setTimeLimit">
                        <el-option v-for="(wfd,index) in wfdNodeList" :key="index" :label="wfd.name" :value="index" />
                      </el-select>
                    </el-tooltip>
                  </ValidationProvider>
                </td>
              </tr>
              <tr>
                <td class="tdlbl tdw17 "><span class="required">*</span>新增环节处理人</td>
                <td class="tdcont tdw83" colspan="3">
                  <ValidationProvider ref="ValidationProvider" v-slot="{ errors }" name="新增环节处理人" rules="required">
                    <el-tooltip :disabled="errors===undefined||errors[0]===undefined" :content="errors===undefined?'':errors[0]" :class="{'invalid-field':errors!==undefined&&errors[0]!==undefined}" popper-class="error-popper-class" placement="right-start" effect="dark">
                      <el-input v-model="wflog.addNewStaffName" v-select-dialog="'staff'" placeholder="请选择新增环节处理人" readonly />
                    </el-tooltip>
                  </ValidationProvider>
                </td>
              </tr>
              <tr>
                <td class="tdlbl tdw17 " :rowspan="wflog.timeLimitDay+1"><span class="required">*</span>新增环节处理时限</td>
                <td class="tdcont tdw83" colspan="3">
                  <el-radio-group v-model="wflog.timeLimitDay">
                    <el-radio :label="0" disabled>无时限</el-radio>
                    <el-radio :label="1" disabled>指定时限</el-radio>
                  </el-radio-group>
                </td>
              </tr>
              <tr v-if="wflog.timeLimitDay==1">
                <td class="tdcont tdw83" colspan="3">
                  <ValidationProvider ref="ValidationProvider" v-slot="{ errors }" name="新增环节处理时限" rules="required">
                    <el-tooltip :disabled="errors===undefined||errors[0]===undefined" :content="errors===undefined?'':errors[0]" :class="{'invalid-field':errors!==undefined&&errors[0]!==undefined}" popper-class="error-popper-class" placement="right-start" effect="dark">
                      <el-date-picker v-model="wflog.newTimeLimit" type="datetime" :format="'yyyy-MM-dd HH:mm:ss'" placeholder="请选择处理时限" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" />
                    </el-tooltip>
                  </validationprovider>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button plain icon="el-icon-close" type="default" @click="handleDialogClose">取 消</el-button>
      <el-button icon="el-icon-check" type="primary" :disabled="doing" @click="handleSubmitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
    name: 'ModifyWflogAddUser',
    components: {

    },
    props: {

    },
    data() {
        return {
            winTitle: '添加处理人',
            dialogFormVisible: false,
            wfInstance: {},
            wflog: {},
            wfdNodeList: [],
            wfEngineUrl: '',
            loading: false,
            doing: false
        }
    },
    computed: {

    },
    watch: {

    },
    created() {
        this.$bus.on('showModifyWflogAddUser', this.showModifyWflogAddUser)
    },
    beforeDestroy() {
        this.$bus.off('showModifyWflogAddUser', this.showModifyWflogAddUser)
    },
    mounted() {

    },
    methods: {
        showModifyWflogAddUser(wfInstance, wflog) {
            const _this = this
            if (_this.loading) {
                return
            }

            _this.loading = true
            this.wfInstance = wfInstance
            this.wflog = wflog
            this.wfEngineUrl = this.$route.query.wfEngineUrl || ''
            this.$set(this.wflog, 'newNode', null)
            this.$set(this.wflog, 'addNewStaffName', '')
            this.$set(this.wflog, 'newTimeLimit', '')
            this.$set(this.wflog, 'timeLimitDay', 0)

            this.dialogFormVisible = true
            this.doing = false

            // 查询流程配置环节
            this.$http({
                method: 'POST',
                params: { wfProcessId: wfInstance.wfId }, // 查询当前流程全部环节
                url: 'workflow/wfdProcessMgr/queryWfdNodeByProcessId'
            }).then(res => {
                if (res.code === 'success') {
                    res.body.listdata.forEach(wfd => {
                        if (wfd.name !== 'jslc' && wfd.name !== 'start' && wfd.name !== 'jslc' && wfd.name !== 'dfzjd' && wfd.name !== 'jsrw') {
                            _this.wfdNodeList.push(wfd)
                        }
                    })

                    _this.loading = false
                } else {
                    this.$alert(res.message, '操作提示', { type: 'error', callback: () => {
                        _this.handleDialogClose()
                        _this.loading = false
                    } })
                }
            })
        },
        setTimeLimit(index) {
            if (this.wfdNodeList[index].timeLimitType !== 9) {
                this.$set(this.wflog, 'timeLimitDay', 1)
            } else {
                this.$set(this.wflog, 'timeLimitDay', 0)
            }
        },
        onSelectStaffCompleted(selectedNodes, attr) {
            this.$set(this.wflog, 'addNewStaffId', selectedNodes[0].orgFullName + ':' + selectedNodes[0].name + '/' + selectedNodes[0].account + '@' + selectedNodes[0].id)
            // this.$set(this.wflog, 'addNewStaffName', selectedNodes[0].title)
            this.$set(this.wflog, 'addNewStaffName', selectedNodes[0].name)
        },
        handleSubmitForm() {
            const _this = this
            if (_this.doing) {
                return
            }
            this.formValidate(() => {
                _this.doing = true
                let timeLimit = '$'
                if (this.wflog.timeLimitDay === 1) {
                    timeLimit = this.wflog.newTimeLimit
                }
                const newNodeProp = this.wfdNodeList[this.wflog.newNode].id + ';' + timeLimit + ';' + this.wflog.pathName
                const reqParams = { 'wfInstanceId': this.wfInstance.id, 'modifyType': 'addUser', 'newNodeProp': newNodeProp, 'selTNID': this.wflog.id, 'newStaffId': this.wflog.addNewStaffId }
                if (this.wfEngineUrl !== '') reqParams.wfEngineUrl = this.wfEngineUrl

                this.$http({
                    method: 'PUT',
                    contentType: 'application/x-www-form-urlencoded',
                    params: reqParams,
                    url: this.$vnode.context.modifyWfNodelogUrl
                }).then(res => {
                    if (res.code === 'success') {
                        this.handleDialogClose()

                        this.$vnode.context.loadWfNodelogList()
                    } else {
                        _this.doing = false
                        this.$alert(res.message, '操作提示', { type: 'error' })
                    }
                })
            })
        },
        handleDialogClose() {
            this.dialogFormVisible = false
            this.wfInstance = {}
            this.wflog = {}
            this.wfdNodeList = []
        }
    }
}
</script>

<style scoped lang="scss">
    /deep/ .el-dialog__body{
        min-height:400px!important;
    }
</style>
